<!doctype html>
<html>
  <head>
    <title>event path</title>
    <script src="../../polymer.js"></script>
    <script src="../../tools/test/htmltest.js"></script>
    <script src="../../node_modules/chai/chai.js"></script>
  </head>
  <body>

  <x-menu-button id="menuButton" foo="foo">
    <div id="item1">Item</div>
  </x-menu-button>
  
  <polymer-element name="x-selector" attributes="selected">
    <template>
      <content id="selectorContent"></content>
    </template>
    <script>
      Polymer('x-selector', {
        selectedChanged: function() {
          var distributed = this.$.selectorContent.getDistributedNodes()
          console.log('must access distributed nodes', distributed);
        }
      });
    </script>  
  </polymer-element>
  
  <polymer-element name="x-menu-button" attributes="foo">
    <template>
      <div foo="{{foo}}">
        <x-selector id="selector" selected="0">
          <content id="menuButtonContent"></content>
        </x-selector>
      </div>
    </template>
    <script>
      Polymer('x-menu-button');
    </script>
  </polymer-element>
  
  <script>
    document.addEventListener('WebComponentsReady', function() {
      setTimeout(function() {
        item1 = wrap(item1);
        menuButton = wrap(menuButton);
        selector = menuButton.$.selector;

        path = [
          item1,
          menuButton.$.menuButtonContent,
          selector.$.selectorContent,
          selector.webkitShadowRoot,
          selector,
          menuButton.webkitShadowRoot,
          menuButton
        ];

        var x = 0;
        path.forEach(function(n, i) {
          n.addEventListener('x', function(e) {
            console.log(e.currentTarget.localName + ':' + e.currentTarget.id);
            chai.assert.equal(e.currentTarget.id, n.id, 'menu current target is as expected');
            chai.assert.equal(x++, i, 'event listener order is correct');
            if (i == path.length-1) {
              done();
            }
          });
        });

        item1.dispatchEvent(new Event('x', {bubbles: true}));
      });
    })
  </script>
  </body>
</html>
